import React, {Component} from 'react';
import {connect} from 'react-redux';//connect 连接
import {Button, Divider, Drawer, Input, Space, Table, message} from 'antd'
import {ADD, EDIT, POP} from "../../store/actions";

class ReactRedux extends Component {
  state = {
    columns: [
      {
        title: '姓名',
        key: 'name',
        dataIndex: 'name'
      },
      {
        title: '年龄',
        key: 'age',
        dataIndex: 'age'
      },
      {
        title: '操作',
        key: 'action',
        dataIndex: 'action',
        render: (text, record) => {
          return <Space>
            <Button type='link' onClick={() => {
              this.setState({
                title: '编辑',
                visible: true,
                isEdit: true,
                name: record.name,
                age: record.age,
                key: record.key
              });

            }}>编辑</Button>
            <Divider type='vertical'/>
            <Button type='link' onClick={() => {
              this.props.deleteByKey(record.key)
            }}>删除</Button>

          </Space>
        }
      },

    ],
    title: '添加',
    visible: false,
    name: '',
    age: '',
    key: -1,
    isEdit: false
  };

  onClose = () => {
    console.log('关闭了');
    this.setState({
      visible: false
    })
  };

  render() {
    let {key, columns, title, visible, name, age, isEdit} = this.state;
    let {count, countIncrement, countDecrement, person, addItem, editPerson} = this.props;
    return (
      <div>
        <Button type='primary' onClick={() => {
          countDecrement()
        }}>-</Button>
        {count}
        <Button type='primary' onClick={() => {
          countIncrement()
        }}>+</Button>
        <Divider/>
        <Button type='primary' onClick={() => {
          this.setState({
            title: '添加',
            visible: true,
            isEdit: false,
            name: '',
            age: '',
            key: -1
          })
        }}>添加</Button>
        <Table columns={columns} dataSource={person}/>
        <Drawer
          title={title}
          placement="left"
          closable={true}
          onClose={this.onClose}
          visible={visible}
        >

          <Input type={'text'} value={name} onChange={(e) => {
            this.setState({
              name: e.target.value
            })

          }} placeholder={'请输入姓名'}/>
          <Divider/>

          <Input type={'text'} value={age} onChange={(e) => {
            this.setState({
              age: e.target.value
            })

          }} placeholder={'请输入年龄'}/>
          <Divider/>

          <Button onClick={() => {

            this.setState({
              visible: false
            });

            if (isEdit) {
              //编辑数据提交到仓库
              editPerson({key, name, age});
            } else {
              addItem({name, age});
            }
            // 1. 数据获取到
            // 2. 抽屉 消失
            // 3. 调用仓库里面的dispatch方法
            // 4. 处理仓库
          }}>确定</Button>
        </Drawer>
      </div>
    );
  }
}

// 参数 state :仓库中的state
// 返回值 : 在页面中使用仓库的数据
const mapStateToProps = ({counter, personReducer}) => { //
  return {
    count: counter,
    person: personReducer
  }
};//可以获取到state


//参数 dispatch : 分发数据到仓库
//返回值 对象
const mapDispatchToProps = dispatch => {  // store.dispatch({type:'标识'})  dispatch===store.dispatch  true
  return {
    // 函数(){
    //   dispatch()
    // }
    countIncrement() {
      dispatch({type: 'INCREMENT'});
    },
    countDecrement() {
      dispatch({type: 'DECREMENT'});
    },
    deleteByKey(key) {
      dispatch({type: POP, key});
    },
    addItem(obj) {
      if (obj === undefined) {
        message.error('请填写添加信息');
        return
      }
      dispatch({type: ADD, obj});
    },
    editPerson(obj) {
      if (obj === undefined) {
        message.error('请填写添加信息');
        return
      }
      dispatch({type: EDIT, obj});
    }
  }
};//可以获取到state


//connect(a,b) 返回的是高阶组件
export default connect(mapStateToProps, mapDispatchToProps)(ReactRedux);
